<template>
	<div class="addBox">
		<div class="addBoxTop">
			<span>添加秒杀</span>
		</div>
		<div class="addDiv">
			<el-form ref="form" :model="objectForm" :rules="objectRules" label-width="80px">
				<el-form-item label="使用云店" prop="shopid_yd">
					<el-select v-model="objectForm.shopid_yd" placeholder="请选择">
						<el-option v-for="item in getYunShopList" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动标题" prop="title">
					<el-input v-model="objectForm.title" class="input-w" placeholder="请填写活动标题名称, 20个文字内" maxlength="20"
						show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="活动描述" prop="desc">
					<el-input v-model="objectForm.desc" class="input-w" placeholder="请填写活动描述, 50个文字内" maxlength="50"
						show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="标题描述">
					<div class="switchDiv">
						<span>关闭后云店不可见</span>
						<el-switch v-model="objectForm.title_is" :active-value="2" :inactive-value="1"></el-switch>
					</div>
				</el-form-item>
				<el-form-item label="限定人群">
					<el-select v-model="objectForm.ctype" placeholder="请选择" @change="selectFun">
						<el-option v-for="item in limitCrowdList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开放日期" prop="objectTime">
					<el-date-picker v-model="objectForm.objectTime" @change="timestampFun" type="daterange"
						:clearable="false" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="开放时间" prop="ctype">
					<div class="timeShowBox" @click="ifShowTime">
						<div class="timeShowdiv"><span v-for="(item, index) in objectForm.time_ls"
								:key="index">{{ item.time_f1 }}~{{ item.time_t1 }}</span></div>
					</div>
				</el-form-item>
				<el-form-item label="限购数量" prop="num_max">
					<el-input-number size="small" v-model="objectForm.num_max" controls-position="right"
						:min="1"></el-input-number>
				</el-form-item>
				<el-form-item label="活动说明">
					<el-input type="textarea" v-model="objectForm.txt_info" class="input-w" placeholder="请填写活动说明"
						show-word-limit></el-input>
				</el-form-item>

				<el-form-item label="活动规则">
					<el-input type="textarea" v-model="objectForm.txt_rule" class="input-w" placeholder="请填写活动规则"
						show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="活动模板">
					<div class="mb-box">
						<div class="title">背景音乐</div>
						<el-select v-model="objectForm.music" placeholder="请选择" @change="selectFun">
							<el-option v-for="(item, index) in musicList" :key="index" :label="item.title"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
					<div class="mb-box">
						<div class="title">广告背景颜色</div>
						<el-radio-group v-model="objectForm.tpl_color">
							<div class="color-box">
								<div class="color-row" v-for="item in color_data" :key="item.id"
									@click="switchColorFun(item.id)">
									<div class="background-item" :style="{
										backgroundColor: item.color,
									}"></div>
									<div class="color-title">
										{{ item.name }}
									</div>
									<el-radio :label="item.id"></el-radio>
								</div>
							</div>
						</el-radio-group>
					</div>
					<div class="mb-box">
						<div class="title">产品排列方式</div>
						<el-radio-group v-model="objectForm.tpl_ls">
							<div class="pl-box" @click="objectForm.tpl_ls = '1'">
								<img :src="objectForm.tpl_ls == 1
										? iconlb1
										: iconlb2
									" />
								<span :style="{
									color:
										objectForm.tpl_ls == 1
											? '#459ffd'
											: '',
								}">列表展示</span>
								<el-radio label="1"></el-radio>
							</div>
							<div class="pl-box" @click="objectForm.tpl_ls = '2'">
								<img :src="objectForm.tpl_ls == 2
										? iconbl1
										: iconbl2
									" />
								<span :style="{
									color:
										objectForm.tpl_ls == 2
											? '#459ffd'
											: '',
								}">并列展示</span>
								<el-radio label="2"></el-radio>
							</div>
						</el-radio-group>
					</div>
					<div class="mb-box">
						<div class="title">产品排序方式</div>
						<el-radio-group v-model="objectForm.sort_type">
							<div class="pl-box" @click="objectForm.sort_type = '1'">
								<div class="txt-box">
									<img :src="iconcd" />
									<span>按默认添加时间</span>
								</div>
								<el-radio label="1"></el-radio>
							</div>
							<div class="pl-box" @click="objectForm.sort_type = '2'">
								<div class="txt-box">
									<img :src="iconjx" />
									<span>价格从低到高</span>
								</div>

								<el-radio label="2"></el-radio>
							</div>
							<div class="pl-box" @click="objectForm.sort_type = '3'">
								<div class="txt-box">
									<img :src="iconsx" />
									<span>价格从高到低</span>
								</div>
								<el-radio label="3"></el-radio>
							</div>
						</el-radio-group>
					</div>
				</el-form-item>
				<el-form-item label="启用">
					<div class="switchDiv">
						<el-switch v-model="objectForm.value1"></el-switch>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="addDivBtn">
			<div @click="openGoodList">添加产品</div>
			<div @click="openProjectList">添加服务</div>
			<div @click="createActivity">创建活动 （已选 {{ goodNum }}）</div>
		</div>
		<!-- 产品列表 -->
		<popSelectitemList ref="popSelectitemList" @determineFun="determineFun"></popSelectitemList>
		<!-- 服务列表 -->
		<popProjectFilling ref="popProjectFilling"></popProjectFilling>
		<!-- 时间列表 -->
		<timeList @pushtimeData="pushtimeData" ref="timeList"></timeList>
	</div>
</template>

<script>
import iconlb1 from "@/static/images/icon-lb-1.png";
import iconlb2 from "@/static/images/icon-lb-2.png";
import iconbl1 from "@/static/images/icon-bl-1.png";
import iconbl2 from "@/static/images/icon-bl-2.png";
import iconcd from "@/static/images/icon-cd.png";
import iconsx from "@/static/images/icon-sx.png";
import iconjx from "@/static/images/icon-jx.png";

import config from "@/js/conf/Config.js";

import popSelectitemList from "@/components/marketing-dough/popSelectitemList.vue";
import popProjectFilling from "@/components/marketing-dough/popProjectFilling.vue";
import timeList from "@/components/marketingMenu/timeList.vue";

export default {
	components: {
		popSelectitemList,
		popProjectFilling,
		timeList,
	},
	data() {
		return {
			iconlb2: iconlb2,
			iconlb1: iconlb1,
			iconbl1: iconbl1,
			iconbl2: iconbl2,
			iconcd: iconcd,
			iconsx: iconsx,
			iconjx: iconjx,

			objectForm: { // 表单提交   
				id: "", // 活动id 
				shopid_yd: "", // 云店id
				title: "", // 活动标题
				desc: "", // 活动描述
				title_is: 1, // 标题描述
				ctype: 1, // 限定人群
				objectTime: "", // 日期数组
				time_from: "", // 开始日期
				time_to: "", // 结束日期
				time_ls: [], // 开放时间段
				num_max: 1, // 限购数量
				txt_info: "", // 活动说明
				txt_rule: "", // 活动规则
				music: "1", // 背景音乐 音乐id
				tpl_color: "1", // 模板-颜色；1红2绿3蓝4紫
				tpl_ls: "1", // 模板-排列方式
				sort_type: "1", //  模板-排列顺序；

				gd_ls: [
					{

					}
				], // 产品
			},
			objectRules: {
				shopid_yd: [
					{ required: true, message: '请选择云店', trigger: 'change' }
				],
				title: [
					{ required: true, message: '请输入活动标题', trigger: 'blur' },
				],
				desc: [
					{ required: true, message: '请输入活动描述', trigger: 'blur' },
				],
				ctype: [
					{ required: true, message: '请选择限定人群', trigger: 'change' }
				],
				num_max: [
					{ required: true, message: '请输入限购数量', trigger: 'blur' },
				],
				objectTime: [
					{ required: true, message: '选择开放日期', trigger: 'blur' },
				],
			},
			// 限定人群
			limitCrowdList: [
				{
					value: 1,
					label: '所有客户'
				},
				{
					value: 2,
					label: '新客首次购买'
				}
			],
			// 选择云店
			getYunShopList: [],
			// 选择背景音乐
			musicList: [],
			shopid_yd: "",
			color_data: [
				{
					color: "#ff0000",
					name: "红色",
					id: "1",
				},
				{
					color: "#00aa00",
					name: "绿色",
					id: "2",
				},
				{
					color: "#3388ff",
					name: "蓝色",
					id: "3",
				},
				{
					color: "#cb54f2",
					name: "紫色",
					id: "4",
				},
			],

			goodNum: 0, // 产品数量
		}
	},
	created() {
		this.gedtMusicList(); // 获取背景音乐
	},
	mounted() {
		this.initGoodList()
	},
	methods: {
		ifShowTime() { // 判断是否可以打开时间选择
			if (!this.objectForm.shopid_yd) return this.$message.error("请选择云店");
			if (!this.objectForm.objectTime) return this.$message.error("请选择活动时间");

			this.$refs.timeList.dialogVisible = true;
			this.$refs.timeList.time_ls = this.objectForm.time_ls;
			this.getTimeList();
		},
		timestampFun(e) { // 选择日期
			console.log(e)
			if (!e) {
				this.objectForm.objectTime = "";
				this.objectForm.time_from = "";
				this.objectForm.time_to = "";
				return
			}
			this.objectForm.time_from = this.objectForm.objectTime[0]
			this.objectForm.time_to = this.objectForm.objectTime[1]

		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					alert('submit!');
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		//  创建活动
		createActivity() {
			if (!this.goodNum) return this.$message.error('至少选择一个产品或服务。');
			this.submitForm("form")

		},
		openGoodList() {
			this.$refs.popSelectitemList.dialogVisible = true;

		},
		async getMusicList() {
			let url = config.YX_PIN_MUSIC_LS;
			let param = {}
			let res = await this.$api({ url: url, data: param });
			if (res.status == 1 && res.data.music_ls) {
				this.musicList = res.data.music_ls
			}
		},
		async getTimeList() {
			let url = config.YX_XSMS_TIME_LS;
			let param = {
				eventid: "",
				shopid_yd: this.objectForm.shopid_yd,
				stime: this.objectForm.time_from,
				dtime: this.objectForm.time_to,
			};
			let res = await this.$api({ url: url, data: param });
			if (res.status == 1 && res.data.t_ls.length) {
				console.log(res.data.t_ls, "getTimeList")
				this.$refs.timeList.timeArr = res.data.t_ls;
				this.$refs.timeList.timeLsFun();
			}

		},
		switchColorFun(id) {
			this.objectForm.tpl_color = id;
		},
		// 选好产品
		determineFun(data) {
			console.log("选好", data);
			this.goodNum = data.length;
			this.objectForm.gd_ls = this.goodsDataClassify(data);
			// this.gd_ls_back = this.gd_ls_back.concat(data);
			// this.gd_ls = this.gd_ls.concat(data);
		},
		//  产品数据拿取有需要的
		goodsDataClassify(data) {
			let mapArr = data.map(item => {
				return {
					gdid: item.gdid,
					unitid: item.unit_id,
					specid: item.specid,
					number: item.number,
					price: item.price,
					pricec: item.pricec,
					money_q: item.money_q,
					txt: item.txt,
				}
			})
			return mapArr;
		},

		// 初始化产品列表
		initGoodList() {
			const data = {
				shopid_yd: this.objectForm.shopid_yd,
			};
			this.$refs.popSelectitemList.initData(data);
		},
		// 打开服务列表
		openProjectList() {
			this.$refs.popProjectFilling.popProjectFilling_Show = true;
		},
		// 获取 选择时间的数据
		pushtimeData(e) {
			this.objectForm.time_ls = e;
		}
	}
}
</script>

<style lang="scss" scoped>
.addBox {
	width: 100%;
	box-sizing: border-box;

	.addDivBtn {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: right;
		border-top: 1px solid #E4E7ED;

		>div {
			display: inline-block;
			background: #3388ff;
			font-size: 16px;
			height: 100%;
			color: #FFFFFF;
			text-align: center;
			padding: 0 20px;
			cursor: pointer;
			border-right: 1px solid #FFFFFF;

			&:last-child {
				border: none;
			}
		}
	}

	.addBoxTop {
		width: 100%;
		height: 40px;
		border-bottom: 2px solid #E4E7ED;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			font-size: 20px;
		}

		>div {
			height: 28px;

		}
	}

	.addDiv {
		box-sizing: border-box;
		width: 100%;
		padding-right: 200px;
		height: calc(100vh - 57px - 70px);
		overflow-y: auto;

		.switchDiv {
			height: 40px;
			display: flex;
			align-items: center;

			span {
				margin-right: 20px;
			}
		}

		.timeShowBox {
			width: 600px;
			height: 40px;
			border: 1px solid #DCDFE6;
			border-radius: 5px;
			cursor: pointer;

			.timeShowdiv {
				padding: 0 10px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				span {
					margin-right: 10px;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}

	::v-deep.mb-box {
		margin-bottom: 10px;

		&:last-child {
			margin: 0;
		}

		.el-radio__label {
			display: none;
		}

		.pl-box {
			font-size: 14px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			cursor: pointer;

			span {
				margin-right: 10px;
			}

			img {
				margin-right: 10px;
				width: 25px;
				height: 25px;
			}

			.txt-box {
				width: 145px;
				display: flex;
				align-items: center;
			}
		}

		.color-box {
			display: flex;
			font-size: 14px;

			.color-row {
				margin-right: 10px;
				text-align: center;
				cursor: pointer;

				.color-title {
					font-size: 12px;
					margin: 10px 0;
				}

				.background-item {
					width: 80px;
					height: 80px;
				}
			}
		}
	}
}
</style>